{extend name="common/base"/}
<!-- 主体 -->
{block name="body"}

<div class="p-3">
	<form class="layui-form gg-form-bar border-t border-x">
		<div class="layui-input-inline">
			<select name="bj_code">
				<option value="">请选择班级</option>
				{volist name="bjlist" id="v"}
				<option value="{$v.bj_code}">{$v.bj_name}</option>
				{/volist}
			</select>
		</div>
		<div class="layui-input-inline" style="width:300px;">
			<input type="text" name="keywords" placeholder="请输入关键字" class="layui-input" autocomplete="off" />
		</div>
		<div class="layui-input-inline">
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchform">提交搜索</button>
		</div>
	</form>
	<table class="layui-hide" id="user" lay-filter="user"></table>
</div>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<span class="layui-btn layui-btn-sm" lay-event="add" data-title="添加用户">+ 添加用户</span>
		<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="import"><i class="layui-icon">&#xe66f;</i>批量导入</button>
	</div>
</script>

<script type="text/html" id="barDemo">
<div class="layui-btn-group"><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="read">查看</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></div>
</script>

{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	const moduleInit = ['tool'];
	function gouguInit() {
		var table = layui.table,tool = layui.tool, form = layui.form;
		var upload = layui.upload;
		let uploadFiles;
		function clearFile() {
			for (let x in uploadFiles) {
				delete uploadFiles[x];
			}
			$('#gougu-upload-choosed').html('');
		}
		function uploadImport(){
			layer.open({
				'title':'批量导入学生',
				'type':1,
				'area': ['640px', '460px'],
				'content':'<div class="layui-form p-3">\
						<div id="uploadType1">\
							<div class="layui-form-item">\
								<label class="layui-form-label">文件：</label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-files">.xls,.xlsx</span><button type="button" class="layui-btn layui-btn-normal" id="uploadSelect">选择文件</button><a href="/static/file/学生导入模板.xlsx" class="layui-btn ml-4">Execl表格模板下载</a>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-tips">1、只有超级管理员才能进行批量导入操作；<br>2、只能上传 .xls、.xlsx文件；<br>3、数据请勿放在合并的单元格中；<br>4、文件大小请勿超过2MB，导入数据不能超过3000条<br>5、如果导入失败，请注意检查表格数据，格式按照样本填写，班级、课程需要系统中存在，不存在的话可能会导入失败。</span>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block green" id="gougu-upload-choosed"></div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block red" id="gougu-upload-note"></div>\
							</div>\
							<div class="layui-form-item layui-form-item-sm">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<button type="button" class="layui-btn" id="uploadAjax">上传并导入</button>\
								</div>\
							</div>\
						</div> \
				</div>',
				success: function(layero, idx){
					form.render();
					//选文件
					let uploadImport = upload.render({
						elem: '#uploadSelect'
						,url: '/api/import/import_student'
						,auto: false
						,accept: 'file' //普通文件
						,acceptMime: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // 此处设置上传的文件格式
						,exts: 'xls|xlsx' //只允许上传文件格式
						,bindAction: '#uploadAjax'
						,choose: function(obj){
							uploadFiles = obj.pushFile();
							// 清空,防止多次上传
							clearFile();
							obj.preview(function(index, file, result){
								obj.pushFile();// 再添加
								$('#gougu-upload-choosed').html('已选择：'+file.name);
							});
						}
						,before: function(obj){
						}
						,progress: function(n, elem, e){
							$('#gougu-upload-note').html('文件上转中...');
							if(n==100){
								$('#gougu-upload-note').html('数据导入中...');
							}
						}
						,error: function(index, upload){
							clearFile();
							$('#gougu-upload-note').html('数据导入失败，请关闭重试');
						}
						,done: function(res, index, upload){
							clearFile();
							layer.msg(res.msg);
							$('#gougu-upload-note').html(res.msg);
							if(res.code==0){
								layer.close(idx);
								layui.pageTable.reload();
							}						
						}
					});
				}
			});	
		}

		layui.pageTable = table.render({
			elem: '#user',
			title: '用户表列表',
			toolbar: '#toolbarDemo',
			url: '/admin/user/datalist',
			page: true,
			limit: 20,
			cellMinWidth: 30,
			cols: [
				[
				{
					fixed: 'left',
					field: 'id',
					title: '编号',
					align: 'center',
					width: 80
				},{
					field: 'bj_code',
					title: '班级',
					align: 'center',
					width: 100
				},{
					field: 'st_code',
					title: '学号',
					align: 'center',
					width: 100
				},{
					field: 'nickname',
					title: '用户昵称',
					align: 'center',
					width: 100
				},{
					field: 'username',
					title: '账号',
					align: 'center',
					width: 100
				},{
					field: 'password',
					title: '密码',
					align: 'center',
					width: 100
				},{
					field: 'name',
					title: '真实姓名',
					align: 'center',
					width: 100
				},{
					field: 'login_pc',
					title: '登录PC',
					align: 'center',
					width: 100
				},{
					field: 'mobile',
					title: '手机（也可以作为登录账号)',
					align: 'center',
					width: 100
				},{
					field: 'email',
					title: '邮箱',
					align: 'center',
					width: 100
				},{
					field: 'sfz',
					title: '身份证号',
					align: 'center',
					width: 100
				},{
				// 	field: 'headimgurl',
				// 	title: '头像',
				// 	align: 'center',
				// 	width: 100,
				// 	templet: function (d) {
				// 		var html = '';
				// 		var delBtn = '<img src="' + d.headimgurl + '" width="28" height="28"/>';
				// 		return delBtn;
				// 	}
				// },{
					field: 'sex',
					title: '性别 0',
					align: 'center',
					width: 100
				},{
					field: 'desc',
					title: '个人简介',
					align: 'center',
					width: 100
				},{
					field: 'birthday',
					title: '生日',
					align: 'center',
					width: 100
				},{

					field: 'province',
					title: '省',
					align: 'center',
					width: 100
				},{
					field: 'city',
					title: '城市',
					align: 'center',
					width: 100
				},{
					field: 'school',
					title: '学校',
					align: 'center',
					width: 100
				},{
					field: 'address',
					title: '家庭地址',
					align: 'center',
					width: 100
				},{
					field: 'depament',
					title: '部门',
					align: 'center',
					width: 100
				},{
					field: 'position',
					title: '职位',
					align: 'center',
					width: 100
				},{
					field: 'level',
					title: '等级  默认是普通会员',
					align: 'center',
					width: 100
				},{
					field: 'status',
					title: '状态  -1删除 0禁用 1正常',
					align: 'center',
					width: 100
				},{
					field: 'last_login_time',
					title: '最后登录时间',
					align: 'center',
					width: 100
				},{
					field: 'last_login_ip',
					title: '最后登录IP',
					align: 'center',
					width: 100
				},{
					field: 'login_num',
					title: '登录次数',
					align: 'center',
					width: 100
				},{
					field: 'register_time',
					title: '注册时间',
					align: 'center',
					width: 100
				},{
					field: 'register_ip',
					title: '注册IP',
					align: 'center',
					width: 100
				},{
					field: 'update_time',
					title: '信息更新时间',
					align: 'center',
					width: 100
				},{
					field: 'score',
					title: '成绩',
					align: 'center',
					width: 100
				},{
					field: 'score1',
					title: '扣分',
					align: 'center',
					width: 100
				},{
					field: 'score2',
					title: '作业评分',
					align: 'center',
					width: 100
				},
				{
					fixed: 'right',
					field: 'right',
					title: '操作',
					toolbar: '#barDemo',
					width: 136,
					align: 'center'
				}				
				]
			]
		});
		
		//监听表头工具栏事件
		table.on('toolbar(user)', function(obj){
			if (obj.event === 'add') {
				tool.side("/admin/user/add");
				return false;
			}
			if (obj.event === 'import') {
				uploadImport();	
				return false;				
			}
		});

		//监听表格行工具事件
		table.on('tool(user)', function(obj) {
			var data = obj.data;
			if (obj.event === 'read') {
				tool.side('/admin/user/read?id='+obj.data.id);
			}
			else if (obj.event === 'edit') {
				tool.side('/admin/user/edit?id='+obj.data.id);
			}
			else if (obj.event === 'del') {
				layer.confirm('确定要删除该记录吗?', {
					icon: 3,
					title: '提示'
				}, function(index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.del();
						}
					}
					tool.delete("/admin/user/del", { id: data.id }, callback);
					layer.close(index);
				});
			}
			return false;
		});

		//监听搜索提交
		form.on('submit(searchform)', function(data) {
			layui.pageTable.reload({
				where: {
					keywords: data.field.keywords,
					bj_code: data.field.bj_code
				},
				page: {
					curr: 1
				}
			});
			return false;
		});
	}
</script>
{/block}
<!-- /脚本 -->